<template>
    <div class="page-container">
        <!-- 顶部标题区 -->
        <div class="container-header">
            <header-title title="能耗报表" @refresh="" @export="" />
            <TimeTabs
                @change=""
                :tabs="tabs"
                :item-style="{
                    width: '25%',
                    textAlign: 'center',
                    backgroundColor: '#fff',
                    padding: '12px 0',
                }"
            ></TimeTabs>
        </div>
        <div class="main-content" style="padding: 16px 0;">
            <el-form ref="queryFormRef" :inline="true" label-suffix="：" :model="queryParams" class="query-form" label-width="98px">
                <div>
                    <el-form-item label="选择配置">
                        <el-select v-model="queryParams.region" placeholder="">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="能耗分类">
                        <el-select v-model="queryParams.region" placeholder="电">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="能耗用途">
                        <el-select v-model="queryParams.region" placeholder="消耗">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="统计维度">
                        <el-select v-model="queryParams.region" placeholder="请选择">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="统计指标">
                        <el-select v-model="queryParams.region" placeholder="请选择">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="统计对象">
                        <el-select v-model="queryParams.region" placeholder="请选择">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="统计周期">
                        <el-select v-model="queryParams.region" placeholder="年报告">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择日期">
                        <el-date-picker v-model="queryParams.value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        <el-checkbox v-model="queryParams.checked" style="margin-left: 20px">单日期</el-checkbox>
                    </el-form-item>
                    <el-form-item label="">
                        <el-radio-group>
                            <el-radio-button v-for="(item, index) in intervalTabs" :label="item.label" :key="index">{{ item.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetQuery" class="reset-icon">
                            <svg-icon icon-class="reset-icon" />
                            重置
                        </el-button>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="">
                        <el-checkbox v-model="queryParams.checked">同期</el-checkbox>
                    </el-form-item>
                    <el-form-item label="">
                        <el-checkbox v-model="queryParams.checked">上期</el-checkbox>
                    </el-form-item>
                    <el-form-item label="">
                        <el-checkbox v-model="queryParams.checked">抄表</el-checkbox>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" class="search-icon">
                            <svg-icon icon-class="search-icon" />
                            保存配置
                        </el-button>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" class="search-icon">
                            <svg-icon icon-class="search-icon" />
                            生成报表
                        </el-button>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button @click="resetQuery" class="reset-icon">
                            <svg-icon icon-class="reset-icon" />
                            重置
                        </el-button>
                    </el-form-item>
                    <el-form-item label="">
                        <el-checkbox v-model="queryParams.checked">定期推送</el-checkbox>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="main-content">
            <div class="energy-section">
                <div class="section-header">
                    <h2>表格</h2>
                    <div class="section-tabs">
                        <el-button type="default" @click="handleExport">
                            导出
                            <svg-icon :icon-class="'export'" size="10"></svg-icon>
                        </el-button>
                    </div>
                </div>
            </div>
            <div class="content-table">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :header-cell-style="{
                        fontSize: '12px',
                        color: '#606266',
                        textAlign: 'center',
                    }"
                >
                    <el-table-column label="时间" align="center" prop="alertName" />
                    <el-table-column label="用电量（kWh）" align="center" prop="serialNumber" />
                    <el-table-column label="电费（元）" align="center" prop="serialNumber" />
                </el-table>

                <div class="table-pagination">
                    <el-pagination
                        :current-page="pagination.currPage"
                        :page-size="pagination.pageSize"
                        :page-sizes="pagination.pageSizes"
                        :total="pagination.totalPage"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TimeTabs from '@/components/TimeTabs/index.vue';
import HeaderTitle from '@/components/headerTitle/index.vue';
import PeakFlatValleyChart from '@/components/PeakFlatValleyChart/index.vue';

export default {
    components: { PeakFlatValleyChart, HeaderTitle, TimeTabs },
    data() {
        return {
            tabs: [
                { key: 'today', label: '综合' },
                { key: 'quarter', label: '部门' },
                { key: 'month', label: '区域' },
                { key: 'month', label: '设备' },
            ],
            intervalTabs: [
                { key: 'month', label: '本年' },
                { key: 'today', label: '本季度' },
                { key: 'today', label: '本月' },
            ],
            compareTabs: [
                { key: 'today', label: '同比' },
                { key: 'month', label: '环比' },
            ],
            iconTabs: [
                { key: 'today', svg: 'icons1' },
                { key: 'month', svg: 'icons2' },
                { key: 'year', svg: 'icons3' },
            ],
            valleyData: [
                { key: 'today', label: '尖期' },
                { key: 'month', label: '峰期' },
                { key: 'quarter', label: '平期' },
                { key: 'quarter2', label: '谷期' },
            ],
            queryParams: {},
            statisticsCards: [
                { color: '#FFAD1E', label: '总用电费用' },
                { color: '#F9744F', label: '去年同期费用' },
                { color: '#1EC7FF', label: '总用电量' },
                { color: '#13C998', label: '去年同期用电量' },
            ],
            queryTable: {},
            tableData: [],
            pagination: {
                pageSize: 10,
                currPage: 1,
                totalPage: 0,
                pageSizes: [10, 20, 30],
            },
        };
    },
    methods: {
        handleQuery() {},
        resetQuery() {},
        handleSizeChange() {},
        handleCurrentChange() {},
    },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
